<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <view class="header-content">
        <image class="header-logo" src="/static/logo.png"></image>
        <text class="header-title">智慧回收箱</text>
        <view class="header-right">
          <view class="notification-icon">
            <text class="fas fa-bell"></text>
            <view class="notification-badge"></view>
          </view>
          <image class="avatar" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/avatar.png"></image>
        </view>
      </view>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 轮播图区域 -->
      <view class="carousel-container">
        <swiper class="carousel" autoplay interval="5000" indicator-dots circular>
          <swiper-item v-for="(item, index) in carouselItems" :key="index">
            <image class="carousel-image" :src="item.image" mode="aspectFill"></image>
            <view class="carousel-caption">
              <text class="carousel-title">{{ item.title }}</text>
              <text class="carousel-subtitle">{{ item.subtitle }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 扫码投放按钮 -->
      <view class="scan-button-container">
        <button class="scan-button" @click="scanQRCode">
          <text class="fas fa-qrcode scan-icon"></text>
          <text class="scan-text">扫码投放</text>
        </button>
      </view>

      <!-- 功能菜单 -->
      <view class="function-menu">
        <view class="menu-title">
          <text>功能菜单</text>
        </view>
        <view class="menu-grid">
          <view class="menu-item" @click="scanQRCode">
            <view class="menu-icon bg-light-blue">
              <text class="fas fa-th-large"></text>
            </view>
            <text class="menu-text">扫码</text>
          </view>
          <view class="menu-item" @click="navigateToRecord">
            <view class="menu-icon bg-light-green">
              <text class="fas fa-history"></text>
            </view>
            <text class="menu-text">投放记录</text>
          </view>
          <view class="menu-item" @click="withdraw">
            <view class="menu-icon bg-light-orange">
              <text class="fas fa-chart-line"></text>
            </view>
            <text class="menu-text">资金提现</text>
          </view>
          <view class="menu-item" @click="nearbyDevices">
            <view class="menu-icon bg-light-blue-gray">
              <text class="fas fa-trash-alt"></text>
            </view>
            <text class="menu-text">周边设备</text>
          </view>
          <view class="menu-item" @click="myRewards">
            <view class="menu-icon bg-light-purple">
              <text class="fas fa-gift"></text>
            </view>
            <text class="menu-text">我的奖励</text>
          </view>
          <view class="menu-item" @click="recentActivities">
            <view class="menu-icon bg-light-pink">
              <text class="fas fa-users"></text>
            </view>
            <text class="menu-text">最近活动</text>
          </view>
          <view class="menu-item" @click="classificationKnowledge">
            <view class="menu-icon bg-light-yellow">
              <text class="fas fa-book"></text>
            </view>
            <text class="menu-text">分类知识</text>
          </view>
          <view class="menu-item" @click="feedback">
            <view class="menu-icon bg-light-red">
              <text class="fas fa-exclamation-circle"></text>
            </view>
            <text class="menu-text">我要反馈</text>
          </view>
        </view>
      </view>

      <!-- 投放数据 -->
      <view class="data-section">
        <view class="feedback-button">

        </view>
        <view class="data-title">
          <text>投放数据</text>
        </view>
        <view class="data-grid">
          <view class="data-item bg-blue">
            <view class="data-content">
              <text class="data-value">86.5</text>
              <text class="data-unit">kg</text>
            </view>
            <text class="data-label">总投放重量</text>
          </view>
          <view class="data-item bg-green">
            <view class="data-content">
              <text class="data-value">¥568.20</text>
            </view>
            <text class="data-label">累计收益</text>
          </view>
          <view class="data-item bg-purple">
            <view class="data-content">
              <text class="data-value">¥439.70</text>
            </view>
            <text class="data-label">累计提现</text>
          </view>
          <view class="data-item bg-orange">
            <view class="data-content">
              <text class="data-value">¥128.50</text>
            </view>
            <text class="data-label">可提现</text>
          </view>
        </view>
      </view>

      <!-- 最近投放记录 -->
      <view class="record-section">
        <view class="section-title">
          <text>最近投放记录</text>
          <text class="more" @click="viewAllRecords">查看全部</text>
        </view>
        <view class="record-list">
          <view class="record-item">
            <view class="record-icon paper"><text class="fas fa-recycle"></text></view>
            <view class="record-info">
              <view class="record-type">纸壳类</view>
              <view class="record-detail">今日 14:30 · 5.2kg</view>
            </view>
            <view class="record-amount">+¥8.50</view>
          </view>
          <view class="record-item">
            <view class="record-icon fabric"><text class="fas fa-tshirt"></text></view>
            <view class="record-info">
              <view class="record-type">织物类</view>
              <view class="record-detail">昨日 19:15 · 3.8kg</view>
            </view>
            <view class="record-amount">+¥6.20</view>
          </view>
          <view class="record-item">
            <view class="record-icon mixed"><text class="fas fa-box"></text></view>
            <view class="record-info">
              <view class="record-type">混合类</view>
              <view class="record-detail">06-18 11:20 · 4.5kg</view>
            </view>
            <view class="record-amount">+¥7.30</view>
          </view>
        </view>
      </view>

      <!-- 环保新闻 -->
      <view class="news-section">
        <view class="section-title">
          <text>环保新闻</text>
          <text class="more" @click="viewAllNews">查看全部</text>
        </view>
        <view class="news-list">
          <view class="news-item" @click="viewNews(1)">
            <view class="news-content">
              <text class="news-title">新型回收技术大幅提高塑料回收效率，回收率提升40%</text>
              <text class="news-description">最新研发的化学分解技术能够更有效地分离不同类型的塑料，大大提高了回收利用率...</text>
              <view class="news-footer">
                <text class="news-date">2023-06-20</text>
                <text class="news-more">阅读更多</text>
              </view>
            </view>
            <image class="news-image" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/607c91f3213f1f2ffafce4c11c53e577.png" mode="aspectFill"></image>
          </view>
          <view class="news-item" @click="viewNews(2)">
            <view class="news-content">
              <text class="news-title">本市新增20个智能回收站，居民可通过APP查询附近站点</text>
              <text class="news-description">为提高回收便利性，市政府计划在本年内新增20个智能回收站，配备智能称重和自动结算功能...</text>
              <view class="news-footer">
                <text class="news-date">2023-06-15</text>
                <text class="news-more">阅读更多</text>
              </view>
            </view>
            <image class="news-image" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/fb601c76dd068a97eeb33e6ef2b7569b.png" mode="aspectFill"></image>
          </view>
          <view class="news-item" @click="viewNews(3)">
            <view class="news-content">
              <text class="news-title">再生产品博览会下周开幕，展示回收材料创新应用</text>
              <text class="news-description">一年一度的再生产品博览会将于6月25日开幕，将展示数百种由回收材料制成的创新产品...</text>
              <view class="news-footer">
                <text class="news-date">2023-06-10</text>
                <text class="news-more">阅读更多</text>
              </view>
            </view>
            <image class="news-image" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/41653efb296924ed80c42a51809fc0c6.png" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </main>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图数据
        carouselItems: [
        {
          image: 'https://picsum.photos/800/400?random=1',
          title: '垃圾分类新时尚',
          subtitle: '参与环保，共创美好家园'
        },
        {
          image: 'https://picsum.photos/800/400?random=2',
          title: '智能回收更便捷',
          subtitle: '扫码投放，实时称重，立即结算'
        },
        {
          image: 'https://picsum.photos/800/400?random=3',
          title: '回收奖励计划',
          subtitle: '回收越多，奖励越多'
        }
      ],
        // 功能菜单数据
        menuItems: [
          { icon: 'fa-qrcode', text: '扫码', color: 'bg-red', action: 'scanQRCode' },
          { icon: 'fa-history', text: '投放记录', color: 'bg-blue', action: 'navigateToRecord' },
          { icon: 'fa-wallet', text: '资金提现', color: 'bg-green', action: 'withdraw' },
          { icon: 'fa-map-marker-alt', text: '周边设备', color: 'bg-purple', action: 'nearbyDevices' },
          { icon: 'fa-gift', text: '我的奖励', color: 'bg-yellow', action: 'myRewards' },
          { icon: 'fa-calendar-alt', text: '最近活动', color: 'bg-orange', action: 'recentActivities' }
        ],
        // 数据卡片数据
        dataCards: [
          { value: '86.5', unit: 'kg', label: '总投放重量', color: 'bg-blue' },
          { value: '¥568.20', unit: '', label: '累计收益', color: 'bg-green' },
          { value: '¥439.70', unit: '', label: '累计提现', color: 'bg-purple' },
          { value: '¥128.50', unit: '', label: '可提现', color: 'bg-orange' }
        ],
        // 投放记录数据
        records: [
          { type: '纸壳类', detail: '今日 14:30 · 5.2kg', amount: '+¥8.50', icon: 'fa-recycle', iconClass: 'paper' },
          { type: '织物类', detail: '昨日 19:15 · 3.8kg', amount: '+¥6.20', icon: 'fa-tshirt', iconClass: 'fabric' },
          { type: '混合类', detail: '06-18 11:20 · 4.5kg', amount: '+¥7.30', icon: 'fa-box', iconClass: 'mixed' }
        ],
        // 新闻数据
        newsItems: [
          {
            id: 1,
            title: '新型回收技术大幅提高塑料回收效率，回收率提升40%',
            description: '最新研发的化学分解技术能够更有效地分离不同类型的塑料，大大提高了回收利用率...',
            date: '2023-06-20',
            image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/607c91f3213f1f2ffafce4c11c53e577.png'
          },
          {
            id: 2,
            title: '本市新增20个智能回收站，居民可通过APP查询附近站点',
            description: '为提高回收便利性，市政府计划在本年内新增20个智能回收站，配备智能称重和自动结算功能...',
            date: '2023-06-15',
            image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/fb601c76dd068a97eeb33e6ef2b7569b.png'
          },
          {
            id: 3,
            title: '再生产品博览会下周开幕，展示回收材料创新应用',
            description: '一年一度的再生产品博览会将于6月25日开幕，将展示数百种由回收材料制成的创新产品...',
            date: '2023-06-10',
            image: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/41653efb296924ed80c42a51809fc0c6.png'
          }
        ]
      }
    },
    onLoad() {
      // 页面加载时的初始化
    },
    methods: {
      // 扫码功能
      scanQRCode() {
        // 在实际项目中，这里会调用uni-app的扫码API
        uni.showModal({
          title: '扫码投放',
          content: '此功能将调用微信扫一扫',
          showCancel: false
        });
      },
      // 跳转到投放记录页面
      navigateToRecord() {
        uni.switchTab({
          url: '/pages/record/record'
        });
      },
      // 提现功能
      withdraw() {
        uni.navigateTo({
          url: '/pages/withdrawal/index'
        });
      },
      // 周边设备
      nearbyDevices() {
        uni.navigateTo({
          url: '/pages/devices/index'
        });
      },
      // 我的奖励
      myRewards() {
        uni.navigateTo({
          url: '/pages/rewards/index'
        });
      },
      // 最近活动
      recentActivities() {
        uni.navigateTo({
          url: '/pages/activities/index'
        });
      },
      // 我要反馈
      feedback() {
        uni.navigateTo({
          url: '/pages/feedback/index'
        });
      },
      // 分类知识
      classificationKnowledge() {
        uni.navigateTo({
          url: '/pages/garbage-classification/index'
        });
      },
      // 查看全部记录
      viewAllRecords() {
        uni.switchTab({
          url: '/pages/record/record'
        });
      },
      // 查看全部新闻
      viewAllNews() {
        uni.showToast({
          title: '新闻列表功能开发中',
          icon: 'none'
        });
      },
      // 查看新闻详情
      viewNews(id) {
        uni.navigateTo({
          url: `/pages/news/index?id=${id}`
        })
      }
    }
  }
</script>

<style>
  /* 全局样式重置 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  /* 顶部导航栏 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
  }

  .header-logo {
    width: 60rpx;
    height: 60rpx;
  }

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .notification-icon {
    position: relative;
    margin-right: 30rpx;
  }

  .notification-badge {
    position: absolute;
    top: -5rpx;
    right: -5rpx;
    width: 16rpx;
    height: 16rpx;
    background-color: #ff4d4f;
    border-radius: 50%;
  }

  .avatar {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
  }

  /* 主内容区域 */
  .main-content {
    padding-top: 120rpx;
    padding-bottom: 100rpx;
  }

  /* 轮播图 */
  .carousel-container {
    width: 100%;
    height: 300rpx;
    margin-bottom: 30rpx;
  }

  .carousel {
    width: 100%;
    height: 100%;
  }

  .carousel-image {
    width: 100%;
    height: 100%;
  }

  .carousel-caption {
    position: absolute;
    bottom: 40rpx;
    left: 30rpx;
    color: #fff;
  }

  .carousel-title {
    font-size: 32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  }

  .carousel-subtitle {
    font-size: 24rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  }

  /* 扫码投放按钮 */
  .scan-button-container {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }

  .scan-button {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: #fff;
    border-radius: 45rpx;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.3);
  }

  .scan-icon {
    font-size: 40rpx;
    margin-right: 15rpx;
  }

  /* 功能菜单 */
  .function-menu {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }

  .menu-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }

  .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .menu-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
    font-size: 40rpx;
  }
  
  /* 图标颜色与背景色匹配 */
  .bg-light-blue .fas {
    color: #1890ff;
  }
  
  .bg-light-green .fas {
    color: #52c41a;
  }
  
  .bg-light-orange .fas {
    color: #fa8c16;
  }
  
  .bg-light-blue-gray .fas {
    color: #40a9ff;
  }
  
  .bg-light-purple .fas {
    color: #722ed1;
  }
  
  .bg-light-pink .fas {
    color: #eb2f96;
  }
  
  .bg-light-yellow .fas {
    color: #faad14;
  }
  
  .bg-light-red .fas {
    color: #f5222d;
  }

  /* 深色背景（用于数据卡片） */
  .bg-blue {
    background-color: #1890ff;
  }
  
  .bg-green {
    background-color: #52c41a;
  }
  
  .bg-purple {
    background-color: #722ed1;
  }
  
  .bg-orange {
    background-color: #fa8c16;
  }
  
  /* 浅色背景 */
  .bg-light-blue {
    background-color: #e6f7ff;
  }
  
  .bg-light-green {
    background-color: #f6ffed;
  }
  
  .bg-light-orange {
    background-color: #fff7e6;
  }
  
  .bg-light-blue-gray {
    background-color: #f0f2f5;
  }
  
  .bg-light-purple {
    background-color: #f9f0ff;
  }
  
  .bg-light-pink {
    background-color: #fff0f6;
  }
  
  .bg-light-yellow {
    background-color: #fffbe6;
  }
  
  .bg-light-red {
    background-color: #fff1f0;
  }

  .menu-text {
    font-size: 26rpx;
    color: #333;
    text-align: center;
    line-height: 36rpx;
  }

  /* 数据区域 */
  .data-section {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }

  .feedback-button {
    margin-bottom: 20rpx;
  }

  .feedback-btn {
    width: 100%;
    height: 70rpx;
    background-color: #fff;
    color: #1890ff;
    border-radius: 10rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }

  .data-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }

  .data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .data-item {
    padding: 30rpx 25rpx;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    min-height: 140rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .data-content {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 10rpx;
  }

  .data-value {
    font-size: 40rpx;
    font-weight: bold;
  }

  .data-unit {
    font-size: 24rpx;
    margin-left: 8rpx;
  }

  .data-label {
    font-size: 26rpx;
    opacity: 0.9;
  }

  /* 记录区域 */
  .record-section {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }

  .more {
    font-size: 26rpx;
    color: #999;
  }

  .record-list {
    background-color: #fff;
    border-radius: 15rpx;
    overflow: hidden;
  }

  .record-item {
    display: flex;
    align-items: center;
    padding: 25rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }

  .record-item:last-child {
    border-bottom: none;
  }

  .record-icon {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25rpx;
    color: #fff;
    font-size: 36rpx;
  }

  .record-icon.paper {
    background-color: #1890ff;
  }

  .record-icon.fabric {
    background-color: #fa8c16;
  }

  .record-icon.mixed {
    background-color: #722ed1;
  }

  .record-info {
    flex: 1;
  }

  .record-type {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
  }

  .record-detail {
    font-size: 24rpx;
    color: #999;
  }

  .record-amount {
    font-size: 30rpx;
    font-weight: bold;
    color: #52c41a;
  }

  /* 新闻区域 */
  .news-section {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }

  .news-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .news-item {
    display: flex;
    background-color: #fff;
    border-radius: 15rpx;
    overflow: hidden;
    padding: 20rpx;
  }

  .news-content {
    flex: 1;
    margin-right: 20rpx;
  }

  .news-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10rpx;
  }

  .news-description {
    font-size: 24rpx;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15rpx;
  }

  .news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .news-date {
    font-size: 22rpx;
    color: #999;
  }

  .news-more {
    font-size: 22rpx;
    color: #1890ff;
  }

  .news-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 10rpx;
  }
</style>
